<!-- 培训项目 -->
<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="75px"
        >
            <el-form-item label="培训名称" prop="projectName">
                <el-input
                    v-model="queryParams.projectName"
                    placeholder="请输入培训名称"
                    clearable
                    size="small"
                    style="width: 240px"
                />
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                    type="date"
                    placeholder="选择开始时间"
                    value-format="yyyy-MM-dd"
                    v-model="queryParams.startTime"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                    type="date"
                    placeholder="选择结束时间"
                    value-format="yyyy-MM-dd"
                    v-model="queryParams.endTime"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="培训状态" prop="state">
                <el-select
                    v-model="queryParams.state"
                    placeholder="请选择"
                    :style="{ width: '100%' }"
                >
                    <el-option
                        v-for="item in projectStatusOptions"
                        :key="item.dictCode"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="培训类型" prop="projectType">
                <el-select
                    v-model="queryParams.projectType"
                    placeholder="请选择"
                    :style="{ width: '100%' }"
                >
                    <el-option
                        v-for="item in trainTypeOptions"
                        :key="item.dictCode"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="projectList">
            <el-table-column
                label="培训名称"
                align="center"
                prop="projectName"
            />
            <el-table-column label="培训类型" align="center" prop="projectType">
            </el-table-column>
            <el-table-column
                label="开始时间"
                align="center"
                prop="projectStartTime"
            />
            <el-table-column
                label="结束时间"
                align="center"
                prop="projectEndTime"
            />
            <el-table-column label="人数" align="center" prop="userCount" />
            <el-table-column label="培训状态" align="center" prop="remark">
                <template slot-scope="scope">
                    {{
                        scope.row.projectState == 0
                            ? "未开始"
                            : scope.row.projectState == 1
                            ? "进行中"
                            : "已完成"
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="lookProjectDetail(scope.row)"
                        >项目详情</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-key"
                        @click="handleExport(scope.row)"
                        >导出</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { projectRecords, exportProjectUserArchives, exportTrainPdf } from '@/api/system/train'
export default {
    name: "project",
    data () {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            // 总条数
            total: 0,
            // 课程表格数据
            projectList: [],
            queryParams: {
                "deptId": "",
                "pageNum": 1,
                "pageSize": 10,
                "projectId": "",
                "userId": "",
                "userName": "",
                "projectName": "",
                "projectType": "",
                "state": "",
                "startTime": "",
                "endTime": ""
            },
            trainTypeOptions: [], // 培训类别
            projectStatusOptions: []
        };
    },
    created () {
        this.getList();
        this.getDicts("train_type").then(response => {
            this.trainTypeOptions = response.data;
        });
        this.getDicts("project_status").then(response => {
            this.projectStatusOptions = response.data;
        });
    },
    methods: {
        dataFormat (val, options) {
            for (let i = 0; i < this[options].length; i++) {
                if (val == this[options][i].dictLabel) {
                    return this[options][i].dictValue
                }
            }
            return val
        },
        /** 查询课程列表 */
        getList () {
            if (this.loading) return false
            this.loading = true;
            projectRecords(this.queryParams).then(response => {
                this.projectList = response.data;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        lookProjectDetail (row) {
            this.$router.push({
                path: '/educationtrain/trainRecord/trainProjectDetail',
                query: {
                    projectId: row.projectId
                }
            })
        },
        /** 导出按钮操作 */
        handleExport (row) {
            this.$confirm('是否确认导出当前数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                // return exportProjectUserArchives({
                //     projectId: row.projectId
                // });
                return exportTrainPdf({
                    projectId: row.projectId
                })
            }).then(response => {
                this.download(response.msg);
            }).catch(function () { });
        }
    }
};
</script>
<style scoped>
.varCoverInfo {
    max-width: 100px;
    max-height: 100px;
}
</style>
